<template>
  <div class="modal" v-if="event" @click="handleBackgroundClick">
    <div class="modal-content" @click.stop>
      <span class="close-button" @click="close">&times;</span>

      <div class="content-container">
        <!-- Left Panel -->
        <div class="left-panel">
          <h3>{{ event.title }}</h3>
          <!-- Ensure the image URL is correctly formed -->
          <p class="event-date" v-text="'开始日期: ' + event.start_date + ' - 结束日期: ' + event.end_date"></p>

          <img :src="getImageUrl(event.image_url)" alt="Event image" class="event-image"/>
        </div>

        <!-- Right Panel -->
        <div class="right-panel">
          <div class="event-description"></div>

          <div class="event-detail" v-html="event.detail"></div>
          <button class="signup-button" @click="handleSignUp">报名</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getAccessToken } from '@/utils/auth';
import { signUpForEvent } from '@/api/events';

import { baseURL } from '@/utils/request';

export default {
  name: 'EventDetailModal',
  props: {
    event: {
      type: Object,
      required: false
    }
  },
  mounted() {
    document.addEventListener('keydown', this.handleKeydown);
  },
  beforeDestroy() {
    document.removeEventListener('keydown', this.handleKeydown);
  },
  methods: {
    getImageUrl(path) {
      // Assuming 'path' contains the correct image path
      return `${baseURL}${path}`;
    },
    close() {
      this.$emit('close');
    },
    handleBackgroundClick() {
      this.$emit('close');
    },
    handleKeydown(e) {
      if (e.key === 'Escape') {
        this.close();
      }
    },
    async handleSignUp() {
      const token = this.getAccessToken();
      if (!token) {
        alert('请登录');
        return;
      }
      try {
        await signUpForEvent(token, this.event.id);
        alert('报名成功');
      } catch (error) {
        alert('报名失败');
      }
    },


    getAccessToken() {
      // 从utils/auth.js引入getAccessToken方法
      return getAccessToken();
    }
  }
};
</script>

<style scoped>
.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.6);
}

.modal-content {
  background: white;
  padding: 20px;
  border-radius: 10px;
  text-align: center;
  width: 90vw;
  max-width: 900px;
  height: 70vh;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}

.close-button {
  float: right;
  font-size: 1.5em;
  cursor: pointer;
}

.content-container {
  display: flex;
  justify-content: space-between;
  align-items: center; /* Changed from start to center for vertical alignment */
  height: 100%;
}

.left-panel{
  flex: 1;
  margin: 0 10px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start; /* Align content to start */
}

.right-panel {
  flex: 1;
  margin: 0 10px;
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* Change to space-between */
  height: 100%;
}

.event-description, .event-detail {
  margin: 10px 0;
  overflow-y: auto; /* Add scrolling */
  flex-grow: 1; /* Allow this part to grow and fill the space */
}

.signup-button {
  margin-top: auto;
  margin-bottom: 40%;
  padding: 10px 20px; /* Add more padding for a larger button */
  background-color: #93bdd8; /* A green background for visibility */
  color: white; /* White text for contrast */
  border: none; /* Remove default border */
  border-radius: 5px; /* Slightly rounded corners */
  font-size: 1em; /* Larger font size */
  cursor: pointer; /* Cursor changes to pointer to indicate it's clickable */
  transition: background-color 0.3s, transform 0.1s; /* Smooth transition for hover effects */
  width: 50%; /* Set the width to 50% of the parent element */
  margin-left: auto; /* Center the button horizontally */
  margin-right: auto; /* Center the button horizontally */

}

.signup-button:hover, .signup-button:focus {
  background-color: #A4D3F1; /* Darker shade of green on hover/focus */
  transform: translateY(-2px); /* Slight raise effect on hover/focus */
  outline: none; /* Remove outline on focus for cleaner look */
}
.event-image {
  max-width: 100%;
  height: auto;
  margin-bottom: 10px;
}

.event-date {
  margin: 10px 0;
}


</style>

